<template>
	<view>
		<u-navbar placeholder fixed autoBack title="单位详情"></u-navbar>
		<view class="u-border-bottom position" style="background-color: #FFFFFF;">
			<u-tabs
				:list="[{ name: '单位信息' }, { name: '参建项目' }, { name: '单位信用' }]"
				:activeStyle="{
					color: '#21A5F3'
				}"
				:current="current"
				@change="e => (current = e.index)"
			></u-tabs>
		</view>
		<u-gap height="44px" bgColor="#FBFCFC"></u-gap>

		<view class="d-p-30" v-if="info">
			<template v-if="current == 0">
				<view class="d-font-32" style="font-weight: bold;color: #323334;">单位信息</view>
				<view class="card d-p-30 d-m-t-20">
					<view class="sub-title d-font-32" style="color: #151C24;font-weight: bold;">基础信息</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-m-r-30">单位名称</view>
						<view class="d-font-28 d-flex-1 d-text-right">{{ info.qymc || '无数据源' }}</view>
					</view>
					<!-- <view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">证件类型</view>
						<view class="d-font-28">{{ info.zjlx || '无数据源' }}</view>
					</view> -->
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">统一信用代码</view>
						<view class="d-font-28">{{ info.tyshxydm || '无数据源' }}</view>
					</view>
					<!-- <view class="d-flex item u-border-bottom">
						<view class="label d-m-r-30">单位地址</view>
						<view class="d-font-28 d-flex-1 d-text-right">{{ info.qyjydz || '无数据源' }}</view>
					</view> -->
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">用户类型</view>
						<view class="d-font-28">{{ info.qylx || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">单位类型</view>
						<view class="d-font-28">{{ info.dwlx1 || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">资质等级</view>
						<view class="d-font-28">{{ info.zzdj || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">属地分类</view>
						<view class="d-font-28">{{ info.sdfl || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">办公地址</view>
						<view class="d-font-28">{{ info.qyjydz || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">注册地行政区划</view>
						<view class="d-font-28">{{ info.zcdDistrictName || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">注册地址</view>
						<view class="d-font-28">{{ info.qygszcszd || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">法人姓名</view>
						<view class="d-font-28">{{ info.frdb || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">法人身份证号</view>
						<view class="d-font-28">{{ info.frdbzjhm || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">法人电话</view>
						<view class="d-font-28">{{ info.frsjhm || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">注册币种</view>
						<view class="d-font-28">{{ info.currencytype || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">注册资本(万元)</view>
						<view class="d-font-28">{{ info.zczb || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">注册日期</view>
						<view class="d-font-28">{{ info.zcrq || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">邮政编码</view>
						<view class="d-font-28">{{ info.jydzyb || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">单位邮箱</view>
						<view class="d-font-28">{{ info.rclxryx || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">备注</view>
						<view class="d-font-28">{{ info.textarea || '无数据源' }}</view>
					</view>
					<!-- <view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">主项资质类别</view>
						<view class="d-font-28">{{ info.zzlb || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">资质等级</view>
						<view class="d-font-28">{{ info.dj || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">证件号码</view>
						<view class="d-font-28">{{ info.frdbzjhm || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">单位联系电话</view>
						<view class="d-font-28">
							<u--text mode="phone" :customStyle="{ fontWeight: 'bold' }" color="#21A5F3" :text="info.dwdh || '无数据源'" size="28rpx" :call="true"></u--text>
						</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">单位传真</view>
						<view class="d-font-28">{{ info.qyczhm || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">手机号码</view>
						<view class="d-font-28">
							<u--text mode="phone" :customStyle="{ fontWeight: 'bold' }" color="#21A5F3" :text="info.dwdh || '无数据源'" size="28rpx" :call="true"></u--text>
						</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">邮政编码</view>
						<view class="d-font-28">{{ info.jydzyb || '无数据源' }}</view>
					</view>
					<view class="d-flex item u-border-bottom">
						<view class="label d-flex-1">单位邮箱</view>
						<view class="d-font-28">{{ info.rclxryx || '无数据源' }}</view>
					</view> -->
				</view>
				<view class="card d-m-t-30 d-p-30">
					<view class="d-flex d-m-b-20"><view class="d-font-32 d-flex-1" style="color: #151C24;font-weight: bold;">附件</view></view>
					<view class="table">
						<view class="tr">
							<view class="th d-p-l-30">序号</view>
							<view class="th">附件</view>
							<view class="th">数量</view>
						</view>
						<template v-if="file && file.length > 0">
							<view class="tr" v-for="(item, index) in file" :key="index" @click="fileInfo(item)">
								<view class="td d-p-l-30">{{ index + 1 }}</view>
								<view class="td">
									<text style="color: #21A5F3;">{{ item.attachName }}</text>
								</view>
								<view class="td">{{ item.count }}</view>
							</view>
						</template>
					</view>
					<view class="d-flex d-row-center d-p-t-20" v-if="!file || file.length <= 0">
						<view><u-empty mode="list" icon="/static/image/none.png" text="暂无附件信息"></u-empty></view>
					</view>
				</view>
			</template>
			<template v-else-if="current == 1">
				<view class="card d-p-30">
					<view class="d-flex d-m-b-20"><view class="d-font-32 d-flex-1" style="color: #151C24;font-weight: bold;">基本信息</view></view>
					<view class="table">
						<view class="tr" v-for="(item, index) in app" :key="index" @click="appDetail(item)">
							<view class="td d-p-l-30">项目名称</view>
							<view class="td" style="max-width: 300rpx;">
								<text style="color: #21A5F3;">{{ item.gcmc }}</text>
							</view>
							<view class="td"><u-icon name="arrow-right" size="24rpx" color="#DFDFDF"></u-icon></view>
						</view>
						<template v-if="!app || app.length <= 0">
							<view class="d-p-30"><u-empty icon="/static/image/none.png" text="无数据源"></u-empty></view>
						</template>
					</view>
				</view>
			</template>
			<template v-else>
				<view style="padding-top: 20vh;"><u-empty icon="/static/image/null.png" text="暂无单位信用数据"></u-empty></view>
			</template>
		</view>
	</view>
</template>

<script>
import { deptDetail, getAtta, getProject } from '../../../common/api.js';
export default {
	data() {
		return {
			current: 0,
			id: null,
			info: null,
			file: [],
			app: []
		};
	},
	onLoad(e) {
		// todo 页面共用 注意 按照下述规则进行操作
		if (e.id) {
			this.id = e.id;
		} else {
			this.id = this.$user.ssqybh;
		}
		this.init();
	},
	methods: {
		init() {
			deptDetail({
				id: this.id
			})
				.then(e => {
					this.info = e.data;
					getProject({
						params: {
							deptId: this.info.deptId,
							pageNum: 1,
							pageSize: 1000
						}
					}).then(e => {
						this.app = e.data;
					});
					return getAtta({
						params: {
							ywlx: 'salary_core_dept_mx',
							ywbh: this.id
						}
					});
				})
				.then(e => {
					this.file = e.data;
				});
		},
		fileInfo(item) {
			let list = item.attachList;
			if (!list) {
				return uni.$u.toast('暂无附件');
			}
			uni.previewImage({
				urls: list.map(e => {
					return e.attachUrl;
				}),
				indicator: 'number',
				loop: true,
				fail: e => {
					console.error(e);
					uni.$u.toast('系统繁忙, 请稍后再试!');
				}
			});
		},
		appDetail(item) {
			uni.$u.route({
				url: '/pages/index/app/appDetail',
				params: {
					id: item.id
				}
			});
		}
	}
};
</script>

<style lang="scss">
.position {
	position: fixed;
	left: 0;
	right: 0;
	background-color: #ffffff;
	z-index: 9999;
}
page {
	background-color: #fbfcfc;
	.card {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		background-color: #ffffff;
		.sub-title {
			position: relative;
			padding-left: 20rpx;
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 8rpx;
				height: 22rpx;
				background: #13a4fe;
				border-radius: 4rpx;
				bottom: 0;
				margin: auto;
			}
		}
		.item {
			height: 100rpx;
			.label {
				font-size: 30rpx;
				font-weight: 400;
				color: #5d6672;
			}
		}
		.item-min {
			height: 60rpx;
			.label {
				font-size: 28rpx;
				color: #5d6672;
			}
			.val {
				font-weight: bold;
			}
		}
		.table {
			font-size: 28rpx;
			display: table;
			width: 100%;
			vertical-align: middle;
			border: 1px solid #f6f7f8;
			.tr {
				display: table-row;
				.th,
				.td {
					display: table-cell;
					height: 80rpx;
					vertical-align: middle;
				}
				.th {
					font-weight: bold;
					color: #162233;
				}
				&:nth-child(2n-1) {
					background-color: #f6f7f8;
				}
			}
		}
	}
}
</style>
